<template>
  <a-flex
    :vertical="!props.inline"
    v-for="x in fves"
    v-bind:key="x.key"
    style="margin-top: 4px"
  >
    <a-select
      v-model:value="x.fid"
      style="width: 160px"
      placeholder="字段"
      :disabled="props.readonly"
      @change="is801Field(x.fid)"
    >
      <a-select-option v-for="y in props.fields" :key="y.id" :value="y.id"
        >{{ y.label }}
        <!-- <br /><small>{{
          appStore.aryFieldType
            .find((ft) => ft.key == y.fieldType.T)
            .map((ft) => ft.label)
        }}</small> -->
      </a-select-option>
    </a-select>
    <a-select
      v-model:value="x.evaCode"
      style="width: 160px"
      placeholder="比对方式"
      :disabled="props.readonly"
      @change="compareType.set(x.fid, x.evaCode)"
    >
      <a-select-option
        v-for="y in appStore.aryFieldValueEvaluation"
        :key="y.key"
        :value="y.key"
        >{{ y.label }}
      </a-select-option>
    </a-select>
    <span style="width: 100%">
      <a-select
        v-if="showSelect.get(x.fid)"
        v-model:value="x.arg"
        :mode="computeSelectMode(x.fid)"
        style="width: 100%"
      >
        <a-select-option
          v-for="code in codeSource.get(x.fid)"
          :key="code.key"
          :value="code.c"
          >{{ code.l }}
        </a-select-option>
      </a-select>
      <a-input
        v-else
        v-model:value="x.arg"
        style="width: 100%"
        placeholder="比对值"
        :disabled="props.readonly"
      ></a-input>
    </span>
    <a-button
      v-if="!props.single && !props.readonly"
      type="link"
      @click="removeFve(x.key)"
      danger
      title="删除限定"
      ><DeleteOutlined
    /></a-button>
  </a-flex>
  <a-flex v-if="!props.single && !props.readonly">
    <a-button size="small" type="link" @click="addFve">增加限定</a-button>
  </a-flex>
</template>
<script setup>
import { reactive } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { DeleteOutlined } from "@ant-design/icons-vue";
import { onMounted } from "vue";

const appStore = CommonDefine.appStore();
const props = defineProps({
  single: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  fields: Array,
  inline: { type: Boolean, default: false },
});
const fves = reactive([]);

const addFve = () => {
  let fve = {
    key: fves.length + 1,
    fid: "",
    evaCode: "",
    arg: "",
  };
  fves.push(fve);
};

const removeFve = (key) => {
  let idx = fves.findIndex((item) => key === item.key);
  fves.splice(idx, 1);
};

const getFves = () => {
  for (let x of fves) {
    if (x.arg) {
      if (typeof x.arg == "string" && x.arg.trim().length > 0) {
        x.args = x.arg.trim().split(",");
      } else {
        x.args = x.arg;
      }
    }
    delete x.arg;
  }
  return fves;
};

// 把多个参数转换成字符串
const argArrayToString = (ary) => {
  let r = "";
  ary.forEach((x, id) => {
    if (id == 0) return;
    r += "," + x;
  });
  return r.substring(1);
};

const setFves = (newFves) => {
  CommonDefine.clearArray(fves);
  newFves.forEach((x) => {
    x.evaCode = appStore.aryFieldValueEvaluation.find((y) => y.key == x.T).key;
    x.arg = argArrayToString(x.C);
    x.fid = x.C[0];
    fves.push(x);
  });
  if (props.single && fves.length < 1) {
    addFve();
  }
};

const showSelect = new Map();
const codeSource = new Map();

const is801Field = (value) => {
  if (CommonDefine.useful(value) && value > 0) {
    let f = props.fields.find((item) => {
      // 简写貌似有问题，找不到对应元素
      // console.log(item);
      return item.id == value;
    });
    // console.log(typeof f);
    if (CommonDefine.useful(f)) {
      let is801 = f.fieldType.T == "FtCode";
      if (is801) {
        showSelect.set(value, is801);
        codeSource.set(value, JSON.parse(f.fieldType.C));
      }
    }
  }
};

const compareType = new Map();

const computeSelectMode = (value) => {
  let ct = compareType.get(value);
  if (CommonDefine.useful(ct) && ct > 30 && ct < 40) {
    if (showSelect.get(value)) {
      return "multiple";
    }
  }
  return "combobox";
};

defineExpose({ getFves, setFves });

onMounted(() => {
  setFves([]);
});
</script>
